<template>
    <!-- 岗位技能开始 -->
    <div id = "postSkills">
            <!-- 功能区制作 -->
            <div class = "functionalArea">
                <!-- 面包屑 -->
                <el-breadcrumb separator = "/">
                    <el-breadcrumb-item :to = "{ path: '/' }">我的教学</el-breadcrumb-item>
                    <el-breadcrumb-item><a>岗位技能</a></el-breadcrumb-item>
                </el-breadcrumb>
                <div class="back-skillmodify">
                    <div class="gos" @click="GoBacks" v-if = "PostSkills2.length == ''"> <i class="iconfont icon-fanhui3"></i>返回</div>
                </div>
                <!-- 上传和下载模块 -->
                <div class = "UploadDownload" v-if = "roleId == 'TEACHER' || roleId == 'MARKET_TEACHER' ||  roleId == 'UNIVERSITY_TEACHER'">
                    <a v-if="!darkFlag" :href = "'/resources/system-file/'+ downloadPathName" ><p class = "Download" v-if = "PostSkills2.length != ''">岗位技能下载<i class = "iconfont icon-tubiaozhizuo-" style = "font-size: 17px;"></i></p></a>
                    <span v-if="darkFlag"><p class = "Download2"  v-if = "PostSkills2.length != ''">岗位技能下载<i class = "iconfont icon-tubiaozhizuo-" style = "font-size: 17px;"></i></p></span>
                    <!-- <i :href="'/resources/system-file/'+item.pathName"><i class="iconfont icon-xiazai2"></i></a> -->
                    <!-- Excel上传暂且屏蔽 -->
                    <!-- <i class = "Upload" @click = "ExcelImport">Excel上传<i class = "iconfont icon-shangchuan-"></i></p> -->
                    <!-- <el-dialog :close-on-click-modal="false"  class="dialog-excel" title="Excel导入" :visible.sync="dialogExcel" width="490px">
                        <div class="dialog-content">
                            <div class="excel-btn-box">
                                <el-button class="button-style upload" style = "cursor: pointer;"><i class = "iconfont icon-shangchuan-" style = "top:-2px;left:-5px"></i>点击上传<input id="excel-file" type="file" multiple="multiple" auto-complete="off" @change="GetFile"></input></el-button>
                            </div>
                            <p v-if="dialogExcelFile">{{ dialogExcelFile }} <i class="iconfont icon-shanchu" @click="ExcelDelete"></i></p>
                        </div>

                        <span slot="footer" class="dialog-footer">
                            <el-button class="button-style" @click="ExcelSave" style = " position: relative; right: 128px;">确 定</el-button>
                            <el-button class="button-style" @click="dialogExcel = false" style = "position: relative; right: 128px;">取 消</el-button>
                        </span>
                    </el-dialog> -->
                </div>
            </div>
            <div class="empty-systerm" v-if = "PostSkills.length == ''">
                <div class="student-empty-systerm-img">
                    <!-- <img src="../../../assets/images/Position-skill-null.png"/> -->
                    <img src="../../../assets/images/index_no_data.png" alt="">
                    <p style = "font-size:16px; color:#adadad">暂无数据</p>
                </div>
            </div>
            <div style = "margin-bottom:100px" v-else>
                <!-- hander开始 调用公共组件-PostInfo-->
                <div class = "hander">
                    <PostInfo :title = 'title' :list = 'list' @closed='close'></PostInfo>
                </div>
                <!-- hander结束 -->
                <!-- 技能开始 -->
                <div class = "Skill-title">
                    <!-- 技能块 -->
                    <div class = "skillBlockName">
                        <!-- <span style = "margin-left:47px;">技能块<i style = "right:32px;"></i></span>
                        <span style = "margin-left:108px;">掌握技能点<i style = "right:48px;"></i></span> -->
                        <span style = "margin-left:47px;">工作领域<i style = "right:40px;"></i></span>
                        <span style = "margin-left:130px;">工作任务<i style = "right:40px;"></i></span>
                        <span style = "margin-left:304px;">学习知识点<i style = "right:48px;"></i></span>
                    </div>
                    <!-- 关联课程 -->
                    <div class = "relatedCoursesName">
                        <span style = "margin-left:65px;">关联课程<i style = "right:39px;"></i></span>
                    </div>
                </div>
                <!-- 技能组织结构图开始 -->
                <div class = "skillOrganizationStructure">
                    <!-- 左侧技能块 -->
                    <!-- {{ PostSkills }} -->
                    <div class = "skill-content"  v-for = "(item,index1) in PostSkills3" :key = "item.id">
                        <!-- ****** -->
                        <!-- 第一层技能块开始 -->
                        <div class = "skillBlock">
                            <!-- 连接两个技能块上边的竖线 -->
                            <span class = "interconnectLine-two" v-if = "index1 != 0"  :style = "{height : heightone[index1] + 'px', top: -blockToBlocktop[index1] + 'px'}"></span>
                            <!-- 循环出技能块的id还有名字 -->
                            <p class = "skillBlock-liID"><span>{{ index1+1 }}</span></p>
                            <p class = "skillBlock-liName">{{item.name | ellipsis}}</p>
                            <!-- <img src="../../assets/img/修改.png" alt=""> -->
                            <i class = "iconfont icon-icon_edit" @click = "Modify(item.id)" v-if = "roleId == 'TEACHER' || roleId == 'MARKET_TEACHER' ||  roleId == 'UNIVERSITY_TEACHER'"></i>
                            <!-- 连接两个技能块的竖线 -->
                            <span class = "interconnectLine" v-if = "index1 != PostSkills3.length-1" :style = "{height : heighttwo[index1] + 'px'}"></span>
                        </div>

                        <!-- 顶梁柱竖线 -->

                        <span class = "verticalLine" :style = "{height : distances[index1] + 'px', top: topHeight[index1] + 'px'}"></span>

                        <!-- ********* -->
                        <!-- {{ PostSkills2 }} -->
                        <!-- 第二层技能点开始 -->
                        <div class = "SkillPoint" :id="'SkillPoint'+index1">
                            <div class = "SkillPoint-ul"
                                v-for = "(item1,index2) in item.childrenList"
                                :key = "item1.id"
                            >
                                <!-- 循环出技能点的id还有名字 -->
                                <div class = "SkillPoint-li">
                                    <span class = "horizontalLine-one"></span>
                                    <span class = "SkillPoint-title">{{item1.name}}</span>
                                    <span class = "horizontalLine-two"></span>
                                </div>
                                <div class = "knowledge"  v-for = "(item2,index3) in item1.childrenList" @mouseover="listHover(item2,index1)" @mouseout="removeActive(item2,index1)">
                                    <span style = "line-height:22px;word-break: break-word;">{{ item2.name }}</span>
                                </div>
                            </div>
                        </div>
                        <!-- ************** -->

                        <!-- 关联课程之前的那条线 -->
                        <p class = "FakeLine"></p>
                        <div class = "relatedCourses" :id="'relatedCourses'+index1">
                            <div style = "margin-left:8px;">
                                <!-- 如果课程不为空的话 -->
                                <div class = "courseBox"
                                     v-for="item5 in relatedCourses[''+item.id+'']"
                                     :class = "{ active: item5.name == name2 && index1 == index2}"
                                >
                                    <!-- {{ item5.length }} -->
                                    <div class = "courseTitle" v-if = "item5.courseId != 0 || item5.courseId != ''">
                                        <!-- <div> -->
                                            <!-- <img src = "http://192.168.1.229:10000/resources/system-file/Linux操作系统.png" @click = "beforeDestroy()" style = "cursor: pointer;"> -->
                                            <!-- @click = "beforeDestroy()" -->
                                            <img :src = "item5.iconValue"
                                                 @click = "beforeDestroy(item5)"
                                                 style = "cursor: pointer;"
                                                 :class = "{prohibit: item5.courseId == 0 || item5.courseId == ''}"
                                            >
                                            <p class = "associatedCourselTitle" >{{ item5.name }}</p>
                                            <p class = "link"
                                               :class = "{prohibit: item5.courseId == 0 || item5.courseId == ''}"
                                               @click = "viewOutline(item5.courseId)"
                                               v-if = "roleId == 'TEACHER' || roleId == 'MARKET_TEACHER' ||  roleId == 'UNIVERSITY_TEACHER'"
                                            >
                                                查看大纲
                                            </p>
                                        <!-- </div>   -->
                                    </div>

                                    <div class = "courseTitle" v-else-if = "item5.courseId == 0 || item5.courseId == ''">
                                        <!-- <p class = "nonExistent">该关联课程系统不存在</p> -->
                                        <img :src="item5.iconValue"/>
                                        <p class = "associatedCourselTitle" >{{ item5.name }}</p>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 每个关联课程组下面的那条分割横线 -->
                        <span class = "associatedCourselLine" v-if = "index1 != PostSkills3.length-1"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import PostInfo from '@/components/PostInfo'
export default {
    components: {
        PostInfo
    },
    data() {
        return {
            //角色
			roleId:'',
            // 获取数据tree
            PostSkills:[],
            // 获取第二层数据
            PostSkills2:[],
            // 获取第三层数据tree
            PostSkills3:[],
            // 获取第四层数据
            PostSkills4:[],
            // 计算的数据
            // 第一条线的长度
            distances: [],
            // 第一条线的起始位置
            topHeight: [],

            //块和块之间的起始高度
            blockToBlocktop:[],
            heightone:[],

            // 块间关联线的长度
            heighttwo: [],

            hoverId: '',

            //调用杨旭姐的组件
            //父级id
            parentId:'',
            //传给儿子
            title:'',
            list:[],

            //关联课程的数据
            relatedCourses: '',
            // c:'',
            name2:'',
            index2:'',

            // Excel导入
            dialogExcel: false,
            // Excel导入文件名称
            dialogExcelFileName: '',
            dialogExcelFile: '',
            // Excek导入提示
            // dialogExcelTips: false,
            // 快速导入
            dialogHistory: false,
            input: '',
            // 历史导入提示
            dialogHistoryTips: false,

            //接收主页传过来的岗位ID
            postId:'',

            //excel上传，传过去的falg参数
            // myfalg:''
            //下载excel传过来的值
            downloadPathName:'',
            //下载按钮是否置灰
            darkFlag:''
        }
    },
    //靳春野过滤器filter，判断文字过长而显示省略号
    filters:{
        ellipsis(value){
            if (!value) return '';
            if (value.length > 12) {
                return value.slice(0,12) + '...'
            }
            return value
        },
    },
    created () {
        // 角色
        this.roleId = this.$store.state.user.roles[0]

        this.postId = this.$route.query.postId

        this.downloadPathName = this.$route.query.pathName
        //console.log(this.downloadPathName)

    },
    mounted () {
        this.inittwo()
        this.init()
        this.DownLoadShow()
    },
    methods: {
        //控制下载显隐
        DownLoadShow(){
            let self = this
            self.$http.get('/tes/unauthorized/internet').then(response => {
                let res = response.data
                if(res.code == '200'){
                    // true 是置灰
                    self.darkFlag = res.data
                }else{
                    self.$message.error(res.message)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        //点击返回
        GoBacks(){
            window.history.back(-1)
        },
        // 鼠标滑过学习知识点
        listHover(item,index){
            this.hoverId = item.id
            this.name2 = item.childrenList[0].name
            this.index2 = index
        },
        // 鼠标划出知识点
        removeActive(item,index){
            this.hoverId = ''
            this.name2 = ''
            this.index2 = ''
        },
        //查看对应课程
        beforeDestroy(item5) {
            var courseId  =  item5.courseId
            // console.log(item5.courseId)
            // isClickSystem 是了再本地存储布尔值，是否是本页面点击的课程体系
            this.$localstorage.putLocalStorage("setCourseId", courseId );
            if(courseId != 0 || courseId != ''){
                this.$router.push({
                    path:'/Teaching/MyCourses/CourseDetail',
                })
            }
        },
        //查看大纲
        viewOutline(courseId){
            let self = this
            if(courseId != 0 || courseId != ''){
                // this.$router.push({
                //     path:'/Teaching/MyCourses/CourseOutline',
                //     query:{courseId:courseId}
                // })
                let routeData
                let newWindow = window.open()
                routeData = self.$router.resolve({
                    name: "CourseOutline",
                    query: {
                        courseId: courseId
                    }
                })
                // window.open(routeData.href, '_blank')
                newWindow.location.href = routeData.href
            }
        },

        // 点击Excel上传按钮上传文件
        // Excel导入
            // ExcelImport() {
            //     let self = this
            //     self.dialogExcelFile = ''
            //     self.dialogExcel = true
            // },
        // Excel文件上传
            // GetFile($event) {
            //     let self = this
            //     let fileType = $event.target.files[0].name
            //         fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length)
            //     if(fileType != 'xls' && fileType != "xlsx"){
            //         self.$message.error('请上传Excel文件!')
            //         return
            //     }
            //     self.dialogExcelFileName = $event.target.files[0]
            //     self.dialogExcelFile = $event.target.files[0].name
            //     $event.target.value = ''
            // },
        // Excel文件删除
            // ExcelDelete() {
            //     let self = this
            //     // 清空数据
            //     self.dialogExcelFile = ''
            // },
        // Excel保存
            // ExcelSave() {
            //     let self = this
            //     self.currentPage = 1
            //     self.pagesize = 10
            //     if(self.dialogExcelFileName == ''){
            //         self.$message.error('请上传Excel文件!')
            //         return
            //     }
            //     const loading = self.$loading({
            //         lock: true,
            //         text: '文件上传中',
            //         spinner: 'el-icon-loading',
            //         background: 'rgba(0, 0, 0, 0.7)'
            //     })
            //     let formData = new FormData()
            //         formData.append('file', self.dialogExcelFileName);

            //     self.$http.post('/tes/course/skill/model-import?skillId='+self.postId + '&role='+self.myfalg, formData).then(response => {
            //         let res = response.data
            //         if(res.code == '200'){
            //             self.$message({
            //                 message: '岗位技能导入成功',
            //                 type: 'success',
            //             })
            //             self.$nextTick(() => {
            //                 self.inittwo()
            //                 self.init()
            //             })
            //             // 添加数据
            //             self.tableData = []
            //             self.tableData = res.data
            //             self.dialogExcel = false
            //             self.totalCount = res.data.length
            //             loading.close()
            //         }else{
            //             loading.close()
            //             self.$message.error(res.message)
            //         }
            //     }).catch(err => {
            //         console.log(err)
            //     })
            // },



        // 点击修改课程按钮传入第一层id和当前id跳转页面修改课程
        Modify(id){
            for(let i = 0 ; i < this.PostSkills.length; i++){
                this.$router.push({
                    path:'/Teaching/SkillModify',
                    query:{parentId:this.PostSkills[i].id,id:id,downloadPathName:this.downloadPathName}
                })
            }
        },
        init(){
            let self = this
            self.$http.get('/tes/course/querySkillInfo?skillId='+ self.postId).then(response => {
                let res = response.data
                    if(res.code == '200'){
                        //调用杨旭姐的组件
                        this.title = res.data[0].name
                        this.list.push(res.data[0].childrenList[0].name)
                        this.list.push(res.data[0].childrenList[0].id)
                        //如果传过来的数据为空的话，那么不显示岗位技能下载按钮
                        // self.$nextTick(() => {
                            // if(self.PostSkills.length === '' || self.PostSkills2.length == ''){
                                // console.log("PostSkills没有数据，下载消失")
                                // $('.Download').css('display','none')
                            // }
                        // })
                        //获取整个岗位技能的数据
                        self.PostSkills = res.data
                        // 获取下载按钮excel路径
                        // self.downloadPathName = self.PostSkills[0].pathName
                        // 获取第三层数据tree
                        for(let i = 0;i < res.data.length; i++){
                            this.PostSkills2 = res.data[i].childrenList
                        }
                        for(let j = 0; j < this.PostSkills2.length; j++){
                            this.PostSkills3 = this.PostSkills2[j].childrenList
                        }
                        self.$nextTick(() => {
                            for (let i = 0; i < self.PostSkills3.length; i++) {
                                let SkillPoint = $('#SkillPoint'+i)
                                let SkillPointHeight = SkillPoint.find('.SkillPoint-ul:first').height() / 2 + SkillPoint.find('.SkillPoint-ul:last').height() / 2
                                //连接知识点线的长度
                                SkillPointHeight = SkillPoint.height() - 74 - SkillPointHeight
                                // let topHeight = SkillPoint.find('.SkillPoint-ul:first').height() / 2 + 37
                                self.distances.push(SkillPointHeight)

                                // self.topHeight.push(topHeight)
                                //判断如果关联课程的总长度大于技能点和技能块的最高度的话，就从关联课程计算线的高度，否则就从技能点和技能快来计算线的高度

                                setTimeout(() => {
                                    let relatedCourses = $('#relatedCourses' + i)
                                    if(relatedCourses.height() > SkillPoint.height()){

                                        let topHeight = (relatedCourses.height() / 2) - (SkillPoint.height() / 2) + (SkillPoint.find('.SkillPoint-ul:first').height() / 2) + 35
                                        self.topHeight.push(topHeight)
                                        //来计算技能块和技能块之间下边线竖线的高度
                                        let heighttwo = relatedCourses.height() / 2 - 58.9 + 20;
                                        self.heighttwo.push(heighttwo)
                                        // 块间关联线上边线的起始位置
                                        let blockToBlocktop = relatedCourses.height() / 2 - 40
                                        self.blockToBlocktop.push(blockToBlocktop)
                                        //来计算技能块和技能块之间上边线竖线的高度
                                        let heightone = relatedCourses.height() / 2 - 80;
                                        self.heightone.push(heightone)
                                    }else{
                                        // console.log(1)
                                        let topHeight = SkillPoint.find('.SkillPoint-ul:first').height() / 2 + 35
                                        self.topHeight.push(topHeight)
                                        //来计算技能块和技能块之间下边线竖线的高度
                                        let heighttwo = SkillPoint.height() / 2 - 58.9 + 20;
                                        self.heighttwo.push(heighttwo)
                                        // 块间关联线上边线的起始位置
                                        let blockToBlocktop = SkillPoint.height() / 2 - 45
                                        self.blockToBlocktop.push(blockToBlocktop)
                                        //来计算技能块和技能块之间上边线竖线的高度
                                        let heightone = SkillPoint.height() / 2 - 80;
                                        self.heightone.push(heightone)
                                    }
                                }, 200);

                                //来计算技能块和技能块之间竖线的高度
                                // let heighttwo = SkillPoint.height() / 2 - 60;
                                // self.heighttwo.push(heighttwo)
                            }
                        })

                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
        },
        inittwo(){
            let self = this
            self.$http.get('/tes/course/querySkillOther?skillId='+ self.postId).then(response => {
                let res = response.data
                    if(res.code == '200'){
                        // self.c = res.data
                        self.relatedCourses = res.data
                        // self.courseId = self.relatedCourses.courseId
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
        },
        //调用杨旭姐的组件
        close(val){
            if(val){
                this.list[0] = val
            }
        },
        // 上传文件之前的钩子
        // beforeUpload (file) {
        //     // console.log(file.type)
        //     const isText = file.type === 'application/vnd.ms-excel'
        //     const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        //     return (isText | isTextComputer)
        // },
        // 上传文件个数超过定义的数量
        // handleExceed (files, fileList) {
        //     this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传`)
        // },
        // 上传文件
        // uploadFile (item) {
        //     console.log(item)
        //     const fileObj = item.file
        //     // FormData 对象
        //     const form = new FormData()
        //     // 文件对象
        //     form.append('file', fileObj)
        //     form.append('comId', this.comId)
        //     console.log(JSON.stringify(form))
        //     // let formTwo = JSON.stringify(form)
        //     EnterAPI.iExcel(form).then(response => {
        //         console.log('MediaAPI.upload')
        //         console.log(response)
        //         this.$message.info('文件：' + fileObj.name + '上传成功')
        //     })
        // }
    }
}
</script>

<style scoped lang = "scss">

    *{
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
    }
    #postSkills{
        width: 1200px;
        height: 100%;
        /* padding-bottom: 300px; */
        position: relative;
        margin: 0 auto;
        /* background-color: red; */
    }
    /* 功能区制作 */

    .functionalArea{
        width: 100%;
        height: 40px;
        position: relative;
        margin: 30px 0 20px 0;
        /* 面包屑 */
        .el-breadcrumb{
            float: left;
            line-height: 15px;
            .el-breadcrumb__inner a{
                border: none;
                padding: 0;
            }
        }
        /* 面包屑返回按钮样式 */
        .back-skillmodify{
            width: 1200px;
            margin: 0 auto;
            .gos{
                float: right;
                cursor: pointer;
                &:hover{
                    color: #1277eb
                }
            }
        }
        /* 上传和下载模块样式 */
        .UploadDownload{
            width: 264px;
            height: 40px;
            line-height: 40px;
            position: relative;
            float: right;
            font-size: 14px;
            .Upload{
                width: 116px;
                height: 40px;
                color: #fff;
                float: right;
                text-align: center;
                background: #3d93f5;
                border-radius: 6px;
                cursor: pointer;
                line-height: 40px;
            }
            .Upload:hover{
                background: #4c9ffe;
            }
            .Download{
                width: 138px;
                height: 40px;
                color: #fff;
                float: right;
                text-align: center;
                background: #3d93f5;
                border-radius: 6px;
                cursor: pointer;
                margin-left: 10px;
                line-height: 40px;
            }
            .Download2{
                width: 138px;
                height: 40px;
                color: #cac7c7;
                float: right;
                text-align: center;
                background: #f1eded;
                border-radius: 6px;
                margin-left: 10px;
                line-height: 40px;
                cursor: default;
            }
            .Download:hover{
                background: #4c9ffe;
            }
            i{
                position: relative;
                top: 1px;
                left: 5px;
            }
        }
    }
    .student-empty-systerm-img{
        width: 1200px;
        height: 250px;
        background: #ffffff;
		clear: both;
		text-align: center;
        position: relative;
		padding: 250px 0 250px 0px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        img{
            position: relative;
            margin-bottom: 25px;
        }
	}
    .hander{
        width: 100%;
        background-color: white;
        /* border: 1px solid red; */
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        .post{
            width: 1000px;
            /* min-height: 100px;  */
            position: relative;
            background-color: white;
            margin: 0 auto;
            padding: 24px 0 20px 0;
            .title{
                display: block;
                position: relative;
                p{
                    position: relative;
                    /* display: initial; */
                    line-height: 20px;
                    text-align: center;
                    font-size: 24px;
                    font-weight: bold;
                    cursor: context-menu;
                }
            }
        }
    }
    /* .post p{
        overflow:hidden;
        text-overflow:ellipsis;
        display: block;
        white-space: break-word;
    } */
    .content {
        display: flex;
        margin-bottom: 30px;
        margin-top: 20px;
    }
    .text {
        width: 900px;
        margin-left: 75px;
        position: relative;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 2px;
        color: #666666;
        transition: line-height .3s;
    }
    .retract {
        position: relative;
        overflow: hidden;
    }
    .retract:after {
        content: '...';
        position: absolute;
        bottom: 0;
        right: 2px;
        width: 25px;
        padding-left: 30px;
        background: linear-gradient(to right, transparent, #fff 45%);
    }
    .btn {
        position: absolute;
        right: -64px;
        bottom: 0;
        font-size: 14px;
        line-height: 19px;
        letter-spacing: 2px;
        color: blue;
        cursor: pointer;
    }
    .more {
        font-size: 14px;
        line-height: 15px;
        letter-spacing: 2px;
        color: #666666;
        visibility: hidden;
    }

    /* 技能块开始 */
    .Skill-title{
        width: 100%;
        height:  60px;
        position: relative;
        margin: 20px 0 10px 0;
        span{
            font-size: 16px;
            line-height: 50px;
            color: #7f7f7f;
            font-weight: bold;
            cursor: context-menu;
            position: relative;
            i{
                width: 16px;
                height: 3px;
                box-sizing: border-box;
                border-bottom: 3px solid #7f7f7f;
                display: inline-block;
                position: relative;
                top: 19px;
            }
        }
        .skillBlockName{
            width: 990px;
            height: 100%;
            float: left;
            background: #fff;
            border-radius: 5px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        }
        .relatedCoursesName{
            width: 200px;
            height: 100%;
            float: left;
            background: #fff;
            border-radius: 5px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
            margin-left: 10px;
        }
    }

    /* 技能组织结构图开始 */
    .skillOrganizationStructure{
        width: 1200px;
        position: relative;
        padding-bottom: 36px;
        background: #fff;
        overflow: hidden;
        display: -webkit-flex;
        display: flex;
        border-radius: 5px;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        box-shadow: 0 0 10px rgba(0,0,0,0.05);
        /* background: red; */
    }
    /* **************

        左侧技能块开始

    ****************/
    .skill-content:first-child{
        margin-top: 20px;
    }
    /* .skill-content:last-child{
        margin-bottom: 300px;
    } */
    /* 技能块 */
    .skill-content{
        width: 1200px;
        background: #fff;
        margin-top: 50px;
        position: relative;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-align-content: center;
        align-content: flex-start;
        align-items : center;
        .skillBlock{
            width: 126px;
            /* height: 124px; */
            position: relative;
            left: 9px;
            .skillBlock-liID{
                width: 45px;
                height: 45px;
                position: relative;
                background: #cce4ff;
                border-radius: 45px;
                margin: 0 auto;
                span{
                    width: 35px;
                    height: 35px;
                    color: #fff;
                    font-size: 17px;
                    font-weight: bold;
                    line-height: 35px;
                    top: 5px;
                    text-align: center;
                    position: relative;
                    background: #1277eb;
                    display: block;
                    border-radius: 45px;
                    margin: 0 auto;
                }
            }
            .skillBlock-liName{
                width: 110px;
                word-break: break-word;
                text-align: center;
                font-size: 16px;
                color: #1277eb;
                font-weight: bold;
                line-height: 22px;
                margin: 9px 0 15px 7px;
            }
            i{
                font-size: 22px;
                position: relative;
                left: 52px;
                cursor: pointer;
                bottom: -7px;
            }
            i:hover{
                color:#1277eb;
            }
        }
        .verticalLine{
            border-left: 1px solid #cdcdcd;
            position: absolute;
            top: 86px;
            left: 135px;
            z-index: 1;
        }
        .interconnectLine{
            border-left: 1px solid #cdcdcd;
            position: absolute;
            top: 150px;
            left: 62px;
        }
        .interconnectLine-two{
            border-left: 1px solid #cdcdcd;
            position: absolute;
            top: - 90px;;
            left: 62px;
        }
    /* 第二层技能点开始 */
    .SkillPoint{
        background: #fff;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); */
        position: relative;
    }
    .SkillPoint-ul{
        position: relative;
        margin: 37px 0;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-align-content: center;
        align-content: flex-start;
        align-items : center;
        .SkillPoint-li{
            width: 326px;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-align-content: center;
            align-content: flex-start;
            align-items : center;
        }

        .horizontalLine-one{
            width: 60px;
            height: 2px;
            border-top: 1px solid #cdcdcd;
            position: relative;
            margin: 0 10px 0 9px;
        }
        .SkillPoint-title{
            width: 176px;
            background: #eef6ff;
            word-break: break-word;
            border: 1px solid #a9c4e3;
            font-size: 14px;
            position: relative;
            box-sizing: border-box;
            border-radius: 5px;
            display: block;
            padding: 10px 10px;
            line-height: 18px;
        }
        .horizontalLine-two{
            width: 50px;
            height: 2px;
            border-top: 1px solid #cdcdcd;
            display: inline-block;
            position: relative;
            margin: 0 10px;
        }
    }
    /* 第三层学习知识点开始 */
    .knowledge{
        width: 496px;
        background: #f5f5f5;
        position: relative;
        padding: 14px 25px 14px 23px;
        box-sizing: border-box;
    }
    .knowledge:hover{
        background: #eeeeee;
    }
}




    /* **************
        左侧技能块结束
    ****************/

    /* 左侧技能块和右侧关联课程中间的线 */
    .FakeLine{
        width: 1px;
        height: 144%;
        border-left: 10px solid rgb(242,242,242);
        position: absolute;
        top: -20px;
        right: 199px;
    }


    /* **************

        右侧关联课程开始

    ****************/

    .relatedCourses{
        width: 200px;
        /* height: 100%; */
        /* background: red; */
        position: relative;
        /* display: inline-grid;
        align-items: center; */
        margin-left: 50px;
        display: table;
        /* border-left: 3px solid #cdcdcd; */
        .courseBox{
            width: 165px;
            margin-left: 15px;
            transition: .3s;
            &.active{
                background: rgb(238,238,238);
                border-radius: 0px;
                /* transform:translateY(-20px); */
            }
        }
        .courseTitle{
            width: 200px;
            height: 150px;
            align-self: center;
            /* display: inline-block;
            vertical-align: middle; */
            display: table-cell;
            vertical-align: middle;
            img{
                width: 110px;
                height: 60px;
                margin: 0 auto;
                background: #385899;
                border-radius: 5px;
                margin-left: 29px;
                margin-bottom:  10px;
                transition: 0.5s;
                transform:translateY(0px);
            }
            .associatedCourselTitle{
                width: 80%;
                /* height: 100%; */
                font-size: 16px;
                display: block;
                position: relative;
                text-align: center;
                margin-bottom: 10px;
                line-height: 20px;
                margin-left: 18px;
                cursor: context-menu;
            }

            .nonExistent{
                width: 70px;
                font-size: 14px;
                color: #939393;
                line-height: 20px;
                position: relative;
                margin-left: 45px;
            }
            /* 禁止点击 */
            .prohibit{
                /* cursor: no-drop!important; */
                display: none;
            }
            .link{
                width: 100%;
                /* height: 100%; */
                font-size: 14px;
                color: #385899;
                display: block;
                position: relative;
                text-align: center;
                cursor: pointer;
            }
            .link:hover{
                color:#1277eb;
            }
        }
        /* 鼠标滑过关联课程效果 */
        .courseTitle:hover{
            img{
                transition: 0.5s;
                transform:translateY(-5px);
                box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            }
        }
    }
    /* 每个关联课程组下面的那条分割横线 */
    .associatedCourselLine{
        width: 130px;
        border-top: 1px solid #cdcdcd;
        position: absolute;
        bottom: -25px;
        right: 37px;
    }
    /* **************
        右侧关联课程结束
    ****************/


    /* .el-dialog__footer{
        text-align: center;
        .dialog-footer{
            .el-button {
                width: 90px;
            }
        }
    } */
    /* elcel导入 */
    /* .dialog-excel{
        .excel-btn-box{
            text-align: center;
            margin-top: 15px;
            height: 32px;
            line-height: 32px;
            margin-left: 20px;
            .upload{
                border-radius: 5px;
                color: white;
                background: #1277eb;
            }
            .upload:hover{
                background: #4c9ffe;
            }
            .button-style{
                position: relative;
                width: 110px;
                margin-right: 22px;
                &:hover{
                    span{
                        color: white;
                    }
                }
                #excel-file{
                    position: absolute;
                    width: 100%;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    background:#385899;
                    opacity: 0;
                    cursor: pointer;
                }
            }
            span{
                color: #1277eb;
                cursor: pointer;
                i{
                    vertical-align: text-top;
                    margin-left: 5px;
                }
            }
        }
        P{
            margin-top: 25px;
            text-align: center;
            font-size: 14px;
            color: black;
            i{
                font-size: 18px;
                color: #385899;
                margin-left: 10px;
            }
            i:hover{
                color: #1277eb;
            }
        }
    } */
    /* excel导入提示 */
    /* .dialog-excel-tips{
        .el-dialog__body{
            padding: 45px 60px;
        }
        .dialog-content{
            p{
                line-height: 28px;
                span{
                    color: #385899;
                }
            }
        }
    } */

</style>
